import React, { PureComponent } from 'react'

import { 
  NavLink,
  Routes,
  Route,
  Navigate
} from "react-router-dom";

export function AboutHistory() {
  return <h3>传承百年老字号，你值得信赖！！！</h3>
}

export function AboutCultrue() {
  return <h3>合作/共赢/诚信</h3>
}

export function AboutContact() {
  return <h3>tel：17712345678</h3>
}

export function AboutJoin() {
  return <h3>投递简历到2313219475@qq.com</h3>
}
export default class About extends PureComponent {
  render() {
    return (
      <div>
        {/* <h2>About</h2> */}
        
        <NavLink to="history" className={({isActive}) => isActive ? "about_child_active" : ""}>历史</NavLink>
        <NavLink to="cultrue" className={({isActive}) => isActive ? "about_child_active" : ""}>文化</NavLink>
        <NavLink to="contact" className={({isActive}) => isActive ? "about_child_active" : ""}>联系</NavLink>

        <Routes>
          {/* v6 默认激活第一个子路由*/}
          <Route path="/" element={<Navigate to="history" />} />
          <Route path="history" element={<AboutHistory />} />
          <Route path="cultrue" element={<AboutCultrue />} />
          <Route path="contact" element={<AboutContact />} />

          <Route path="join" element={<AboutJoin />} />
        </Routes>

        {/* 路由表子路由出口 */}
        {/* <Outlet /> */}

        {/* v5 默认激活第一个子路由*/}
        {/*  <NavLink exact to="/about" activeClassName="about-active">企业历史</NavLink>
        <NavLink exact to="/about/culture" activeClassName="about-active">企业文化</NavLink>
        <NavLink exact to="/about/contact" activeClassName="about-active">联系我们</NavLink> */}
        {/* <Switch>
          <Route exact path="/about" component={AboutHisotry}/>
          <Route path="/about/culture" component={AboutCulture}/>
          <Route path="/about/contact" component={AboutContact}/>
        </Switch> */}

        <button style={{margin: "20px"}} onClick={e => this.jumpToJoin()}>按钮</button>

      </div>
    )
  }
  
  jumpToJoin() {
    // v5通过路由创建的withRouter(组件) 自带三个对象 
    // console.log(this.props.history);
    // console.log(this.props.location);
    // console.log(this.props.match);
    //this.props.history.push("/about/join")

    //v6 使用hooks 但是hooks只有函数式组件才能调用 所以把app改为函数式组件 并传来
    this.props.navigate("/about/join")
  }
}
